<template>
	<div class="erp-head clearfix">
		<div class="head-logo">
			<img class="logo-img" src="../assets/img/logo.png" />
		</div>
		<div class="head-menu">
			<ul class="menu-ul">
				<li class="menu-li" v-for="(item,index) in menuList" key='index' :class="{'active': clickIndex == index}" @click="clickHandle(item,index)">
					<a class="menu-a">{{item.name}}</a>
					<div class="menu-child">
						<div class="child-item" v-for="(obj,index_child) in item.children" key='index_child'>
							<div class="item-title">
								<b>{{obj.title}}</b>
							</div>
							<ul class="item-ul">
								<li class="item-li" v-for="(temp,index_last) in obj.list" key='index_last' @click="routerClick(temp)">
									<a :class="{'active': temp.active == active}">{{temp.name}}</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="head-personal">
			<a class="per-msg">
				<i class="icon iconfont icon-notice"></i>
				<span>消息</span>
			</a>
			<i class="icon iconfont icon-myfill blue per-icon"></i>
			<span class="per-name">{{userInfo.userName}}</span>
			<a class="per-car">
				<i class="icon iconfont icon-cart"></i>
				<span class="number blue">20</span>
			</a>
			<div class="menu-child">
				<div class="child-item" v-for="(item,index) in userMenu" key='index'>
					<div class="item-title">
						<b>{{item.title}}</b>
					</div>
					<ul class="item-ul">
						<li class="item-li" v-for="(obj,index_child) in item.list" key='index_child' @click="routerClick(obj)">
							<a :class="{'active': obj.active == active}">{{obj.name}}</a>
						</li>
					</ul>
				</div>
				<div class="logout" @click="logout">
					<a class="blue">退出登录</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				
				clickIndex: 0,
				active: '', // -当前路由状态标记值
				
				menuList: [],
				userMenu: [],
			}
		},
		methods: {
			clickHandle: function(item, index) {
				this.clickIndex = index;
				if(index == '0'){
					// -菜单只有首页能点击跳转，其他菜单有菜单点击跳转
					this.$router.push(item.path);
					this.active = '';
				}
			},
			logout: function(){
				// -退出登录
				this.$router.push({
					path: '/login'
				})
			},
			routerClick: function(item){
				this.$router.push(item.path);
			},
			menuEvent: function(pars){
				this.clickIndex = pars;
			},
			activeEvent: function(pars){
				this.active = pars;
			}
		},
		created() {
			this.userInfo = this.$session.getItem('user');
			this.menuList = this.$menuTop.menuList;
			this.userMenu = this.$menuTop.userMenu;
			this.$bus.on('menuEvent',this.menuEvent);
			this.$bus.on('activeEvent',this.activeEvent);
		}
	}
</script>

<style scoped="scoped" lang="less">
	.erp-head {
		position: relative;
		background: #3A8DE4;
		box-shadow: 0px 3px 6px 0px rgba(214, 214, 214, 0.5);
		height: 60px;
		.head-logo {
			cursor: pointer;
			position: absolute;
			left: 56px;
			.logo-img {
				width: 124px;
				height: 60px;
			}
		}
		.menu-child {
			.logout {
				display: block;
				text-align: right;
				padding-bottom: 16px;
				border-bottom: 0;
			}
			position: absolute;
			top: 38px;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 6px 0px rgba(68, 68, 68, 0.49);
			color: rgb(89, 90, 90);
			line-height: normal;
			text-align: left;
			padding: 0 14px;
			font-size: 14px;
			left: -102px;
			cursor: default;
			display: none;
			z-index: 10080;
			.child-item {
				letter-spacing: -8px;
				.item-title {
					min-width: 92px;
					display: table-cell;
				}
				.item-ul {
					line-height: 30px;
					min-width: 320px;
					display: table-cell;
					.item-li {
						display: inline-block;
						font-weight: normal;
						padding: 0px 5px;
						height: 20px;
						line-height: 20px;
						margin: 0 5px;
						min-width: 80px;
						a {
							cursor: pointer;
							text-decoration: none;
							color: rgb(89, 90, 90);
							vertical-align: middle;
							&:hover{
								border-radius: 2px;
							    background-color: #3A8DE4;
							    color: #fff;
							}
						}
						.active{
							border-radius: 2px;
						    background-color: #3A8DE4;
						    color: #fff;
						}
					}
				}
			}
			.child-item > * {
				letter-spacing: normal;
				display: inline-block;
			}
		}
		.menu-child > div {
			border-bottom: 1px dashed #ececec;
			padding: 15px 0 5px;
			display: table;
		}
		.head-menu {
			margin-left: 230px;
			margin-top: 22px;
			padding-right: 270px;
			.menu-ul {
				.active {
					background-color: #337ab7;
					border-radius: 2px 2px 0 0;
				}
				.menu-li {
					display: inline-block;
					font-size: 16px;
					font-weight: bold;
					min-width: 65px;
					text-align: center;
					height: 38px;
					line-height: 38px;
					padding: 0 5px;
					position: relative;
					&:hover {
						cursor: pointer;
						background-color: #337ab7;
						border-radius: 2px 2px 0 0;
					}
					&:hover .menu-child {
						display: block;
					}
					.menu-a {
						color: rgb(255, 255, 255);
						display: block;
					}
					.menu-child{
						&:after {
							width: 0px;
							height: 0px;
							border: 6px transparent solid;
							border-bottom-color: #fff;
							position: absolute;
							top: -12px;
							left: 128px;
							content: "";
						}
					}
				}
			}
		}
		.head-personal {
			cursor: default;
			background-color: rgb(255, 255, 255);
			height: 38px;
			line-height: 38px;
			margin-top: 22px;
			margin-right: 20px;
			padding: 0 18px;
			border-radius: 5px 5px 0 0;
			position: absolute;
			right: 0;
			bottom: 0;
			&:hover .menu-child{
				display: block;
			}
			.menu-child{
				right: 0;
    			left: auto;
			}
			
			.per-msg {
				position: absolute;
				left: -65px;
				color: #fff;
				padding: 0 5px;
				font-size: 14px;
				font-weight: bold;
			}
			.per-icon {
				font-size: 20px;
				margin-right: 10px;
				vertical-align: middle;
				vertical-align: middle;
			}
			.per-name {
				max-width: 98px;
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				vertical-align: middle;
			}
			.per-car {
				cursor: pointer;
				padding-left: 10px;
				float: right;
				position: relative;
				&:before {
					display: block;
					content: '';
					position: absolute;
					top: 12px;
					width: 1px;
					height: 16px;
					background: #666;
				}
				.icon-cart {
					font-size: 18px;
					padding-left: 10px;
				}
				.number {
					display: inline-block;
					width: 18px;
					height: 18px;
					line-height: 20px;
					background: #3a9df3;
					color: #fff;
					border-radius: 50%;
					text-align: center;
					position: absolute;
					right: -10px;
					top: 2px;
				}
			}
		}
	}
	
	.erp-head>div {
		display: inline-block;
	}
</style>